<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../core/core.js"></script>
<script type="text/javascript" src="../core/json2.js"></script>
<style type="text/css">
.* { margin:0; padding:0;}
.current {background:#CCC;}
.search-suggest { border:1px solid #666; position:absolute; background:#FFFFFF; }
</style>
</head>
<body>
<input type="text" id="input-suggest" style="font-size:18px;">

<script type="text/javascript">
var autoSuggest = function(Obj){
	this.cur = -1; this.oInput = Obj.oInput; this.oTag = Obj.oTag; this.elClass = Obj.listClass;

	var oThis = this; //改变this作用域
	
	this.oTag.onmousedown = 
	this.oTag.onmouseup = 
	this.oTag.onmouseover = function(e){
		var el = E.getTarget(e);

		if(e.type=='mousedown'){
			oThis.oInput.value = el.firstChild.nodeValue;
			oThis.hideSuggestions();
		}else if(e.type=='mouseover'){
			oThis.highlightSuggestion(el);
		}else{
			oThis.oInput.focus();
		}
	};

    E.on(this.oInput, 'blur', function(){
    	oThis.hideSuggestions();
    });

    E.on(this.oInput, 'keyup', function(e){
		var iKeyCode = e.keyCode;
		if(iKeyCode==8 || iKeyCode == 46){
			oThis.responseAjax();
		}else if(iKeyCode < 32 || (iKeyCode >= 33 && iKeyCode < 46) || (iKeyCode >= 112 && iKeyCode <= 123)){
			return false;
		}else{
			oThis.responseAjax();
		}
		oThis.cur = -1;
		/*
		E.on(document, 'click', function(e){
			var el = E.getTarget(e);
			if(el != oInput && !D.isAncestor(oInput, el) && el != oT && !D.isAncestor(oT, el)){
				oT.style.display = 'none';
			};
		});
		*/
	});

	E.on(this.oInput, 'keydown', function(e){
		if (!e) {
            e = window.event;
        }
		oThis.handleKeyDown(e);
	});
};

autoSuggest.prototype = {
	handleKeyDown : function(e){
		switch(e.keyCode){
			case 38: //up arrow
				this.goToSug(-1);
				break;
			case 40: //down arrow
				this.goToSug(1);
				break;
			case 27: //esc
				this.hideSuggestions();
				break;
			case 13: //enter
			 	this.hideSuggestions();
	            break;
		}
	},
	goToSug : function(iDff){
		var sList = this.oTag.childNodes, len = sList.length;

		var oldLen = len;

		if(len>0){
			var oNode = null;
			
			if(iDff>0){
				if(this.cur < (len-1)){
					oNode = sList[++this.cur];
				}
			}else{
				if(this.cur > 0){
					oNode = sList[--this.cur];
				}
			}

			if(oNode){
				this.highlightSuggestion(oNode);
				this.oInput.value = oNode.firstChild.nodeValue;
			}
		}
		return len;
	},
	highlightSuggestion : function(oSuggestionNode){
		var sList = this.oTag.childNodes, len = sList.length;

		for(var i=0; i<len; i++){
			var oNode = sList[i];
			if (oNode == oSuggestionNode) {
	            oNode.className = this.elClass;
	        } else if (oNode.className == this.elClass) {
	            oNode.className = "";
	        }
		}
	},
	hideSuggestions : function(){
		this.oTag.style.display = 'none';
	},
	responseAjax : function(){
		var oInput = this.oInput, oThis = this;
		
		if(jav.lang.trim(oInput.value)==''){
			oThis.oTag.style.display = 'none';
		}else{
			var sUrl = 'ajax-suggest.php?keywords='+encodeURIComponent(oInput.value)+ '&timeStamp=' + (new Date()).getTime();
			AJAX('GET', sUrl, function(o){
				
				var oB = JSON.parse(o.responseText);
			
				var ohtml = '';
				
				for(var i=0, len=oB.length; i<len; i++){
					ohtml += '<p>'+oB[i]+'</p>';
				}
				
				oThis.oTag.innerHTML = ohtml;
				
				if(len>0){
					oThis.oTag.style.display = '';
				}else{
					oThis.oTag.style.display = 'none';
				}
				
			});
			
		}
	}
};

E.on(window, 'load', function(){

	var oInput = G('input-suggest'),xy = D.getXY(oInput),oT = document.createElement('div'),oTop;

	oT.className = 'search-suggest';
	oT.style.display = 'none';
	document.body.appendChild(oT);

	oTop = xy[1]+oInput.offsetHeight;
	oT.style.left = xy[0]+'px';
	oT.style.top = oTop+'px';
	
	var autoSugEg1 = new autoSuggest({
		oInput: oInput,
		oTag : oT,
		listClass : 'current'
	});

});
</script>
</body>
</html>